<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>fuint会员营销管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer{left: 0;}
            .layui-layout-admin .layui-side{left: -300px;}
        }
    </style>
</head>
<body>


        <!-- 内容主体区域 -->
        <div >
            <!-- 内容主体区域  面包屑-->
            <span class="layui-breadcrumb" lay-separator="/">
              <a href="index.html">首页</a>
            </span>
            <!-- 水平线 -->
            <hr class="layui-bg-blue">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>常用功能</legend>
            </fieldset>
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-primary layui-border">新增订单</button>
                <button class="layui-btn layui-btn-primary layui-border-green">交易金额</button>
                <button class="layui-btn layui-btn-primary layui-border-blue">新增会员</button>
                <button class="layui-btn layui-btn-primary layui-border-orange">收银下单</button>
                <button class="layui-btn layui-btn-primary layui-border-red">核销卡券</button>
                <button class="layui-btn layui-btn-primary layui-border-black">商品管理</button>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>报表统计</legend>
            </fieldset>
            <div class="first-line" style="display: flex">
                <div id="shopStatus" style="width: 400px;height:400px;"></div>
                <div id="memberGrade" style="width: 400px;height:400px;"></div>
                <div id="memberDate" style="width: 400px;height:400px;"></div>
            </div>
        </div>


<script src="layui/layui.js" ></script>
<script src="jquery/jquery-3.6.0.js" ></script>
 <script src="echarts/echarts.min.js"></script>
<script>

    //店铺状态
    $.ajax({
        url:"/chart/ShopStatusGroup",           // 请求路径
        type:"get",                  // 请求的方式，不区分大小写
        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        // contentType:"application/json;charset=utf-8",
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        success:function(response){
            console.log("返回: " + response);
            if(response.code === 200) {
                let array = response.data
                let shopStatus = []
                let shopCount = []
                let shopIndex = 0
                for (i = 0; i < array.length; i++) {
                    let shopObject = array[i]
                    shopStatus[shopIndex] = shopObject.status?"在营":"不在营"
                    shopCount[shopIndex] = shopObject.count
                    shopIndex++
                }
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('shopStatus'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '店铺状态统计'
                    },
                    tooltip: {},
                    // legend: {
                    //     data: ['在营','不在营']
                    // },
                    xAxis: {
                        data: shopStatus
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: shopCount
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        },
        error:function(response){
            console.log("出错返回: " + response);
        }
    });
    //会员等级
    $.ajax({
        url:"/chart/MemberGroup",           // 请求路径
        type:"get",                  // 请求的方式，不区分大小写
        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        // contentType:"application/json;charset=utf-8",
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        success:function(response){
            console.log("返回: " + response);
            if(response.code === 200) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('memberGrade'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '会员等级统计',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                    },
                    series: [
                        {
                            name: '会员数量',
                            type: 'pie',
                            radius: '50%',
                            data: response.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        },
        error:function(response){
            console.log("出错返回: " + response);
        }
    });
    //会员新增数量
    $.ajax({
        url:"/chart/MemberAddGroup",           // 请求路径
        type:"get",                  // 请求的方式，不区分大小写
        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        // contentType:"application/json;charset=utf-8",
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        success:function(response){
            console.log("返回: " + response);
            if(response.code === 200) {
                let array = response.data
                let shopStatus = []
                let shopCount = []
                let shopIndex = 0
                for (i = 0; i < array.length; i++) {
                    let shopObject = array[i]
                    shopStatus[shopIndex] = shopObject.memberDate
                    shopCount[shopIndex] = shopObject.memberCount
                    shopIndex++
                }
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('memberDate'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '日增会员统计',
                    },
                    xAxis: {
                        type: 'category',
                        data: shopStatus
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: shopCount,
                            type: 'line'
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        },
        error:function(response){
            console.log("出错返回: " + response);
        }
    });
</script>

</body>
</html>
